<!--
 * @页面名称:
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <scale-screen
    width="1920"
    height="1080"
    :delay="500"
    :fullScreen="false"
    :boxStyle="{
      background: '#03050C',
      overflow: isScale ? 'hidden' : 'auto'
    }"
    :wrapperStyle="wrapperStyle"
    :autoScale="isScale"
  >
    <div class="content_wrap">
      <Headers />
      <Main></Main>
    </div>
  </scale-screen>
  <!-- <Setting /> -->
</template>

<script setup lang="ts">
import { ref } from "vue";
import { RouterView } from "vue-router";
import ScaleScreen from "./components/ScaleScreen/index.vue";
import Headers from "./header.vue";
import Main from "./components/Main/index.vue";
// import Setting from "./setting.vue";
import { useDataScreenStore } from "@/stores/modules/dataScreen";
import { storeToRefs } from "pinia";

const dataScreenStore = useDataScreenStore();
const { isScale } = storeToRefs(dataScreenStore);
const wrapperStyle = {};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.content_wrap {
  width: 100%;
  height: 100%;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("./images/pageBg.png");
  background-size: cover;
  background-position: center center;
}
</style>
